<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>切图秀</title>
<link rel="stylesheet" href="css/slicy.css">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]--> 

</head>

<body>
<div class="header">
	<div class="wrapper">
	<img src="imgs/logo.png"/>
	<a href="###">v1.0</a>
	</div>
</div>
<div class="container">
	
	<div class="down">
		<a href="./demo6.23/" target="_blank">查看演示</a>
		<a href="./down6.23/down.zip" target="_self">立即下载</a>
	</div>
	<h2>什么是切图秀？</h2>
	<div class="demo">
		我们把切图秀定义为基于html5+css3前端切图实现的微场景秀。并且开源切图秀的基础项目，它提供了一个可靠的基础去创建你的项目，你只需要发挥你的创意去组合动画。
	</div>
	<h2>作品</h2>
	<p>切图秀被用在了很多项目中，例如跟我们合作的汉口银行，肌肤管家，以及安以轩结婚请帖。</p>
	<p>链接地址：<a href="http://ent.qq.com/a/20170507/017272.htm" target="_blank">http://ent.qq.com/a/20170507/017272.htm</a></p>
  <h2>实现原理</h2>
	<div class="demo">
		切图秀基于jquery.fullpage，并且加以改造，融合了非常强大的css3动画库animate.css，通过非常简单的方式可以实现不同动画的调用。
	</div>
	<h2>使用方式</h2>
	<div class="code">
	  <p>在head区域加入<br>
  </p>
	  <p>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/animate.css&quot;/&gt;<br>
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/jquery.fullPage.css&quot;/&gt;<br>
</p>
  
      <p>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/qtx.css&quot;/&gt;</p>
      <p>&nbsp;</p>
  <p>在&lt;/body&gt;前面加入</p>
  <p>&lt;script src=&quot;js/jquery-1.7.2.js&quot; &gt;&lt;/script&gt;</p>
  <p>&lt;script type='text/javascript' src=&quot;js/jquery.fullPage.min.js&quot;&gt;&lt;/script&gt;<br>
&lt;script type='text/javascript' src=&quot;js/qtx.js&quot;&gt;&lt;/script&gt;</p>
  </div>
  
  <h2>结构规则</h2>
  <div class="code">
  	<p>&lt;div class=&quot;fpLayout&quot;&gt;</p>
  	<p>&lt;div class=&quot;section page1&quot;&gt;</p>
  	<p>xxx</p>
  	<p>&lt;/div&gt;</p>
  	<p>&lt;div class=&quot;section page2&quot;&gt;</p>
  	<p>xxx</p>
  	<p>&lt;/div&gt;</p>
  	<p>&lt;div class=&quot;section page3&quot;&gt;</p>
  	<p>xxx</p>
  	<p>&lt;/div&gt;</p>
  	<p>&lt;/div&gt;</p>
  </div>
  
  <h2>添加动画</h2>
  <p>data-fp-animate=&quot;zysBounceIn&quot; (必须要加，动画来源于animate.css动画库)</p>
  <p>参考文档 <a href="http://developer.qietu.com/p/CSS3-Animation/tools.html" target="_blank">http://developer.qietu.com/p/CSS3-Animation/tools.html</a></p>
  <p>data-fp-delay=&quot;1s&quot; (延迟1秒出现，非必要，不添加为不延迟)</p>
  <p>data-fp-duration=&quot;1s&quot; （动画时间1s，非必要，不添加默认为1s）</p>
  <p>data-fp-iteration=&quot;10&quot; （动画反复执行10次，非必要，不添加默认为1次，值为“infinite”代表无限循环。）</p>
  <div class="code">
  &lt;img class=&quot;demo&quot; src=&quot;images/zys_img3.png&quot; data-fp-delay=&quot;0&quot; data-fp-animate=&quot;zysBounceIn&quot; data-fp-duration=&quot;1s&quot;/&gt;  </div>
  
  <h2>关于loading</h2>
  <p>集成了波浪的进度条显示，它可以真实的反应当前的加载进度，增强用户体验。</p>
  <div class="demo">
  	<img src="imgs/img1.png" width="200"/>
  </div>
  <div class="code">&lt;div id=&quot;fpLoading&quot;&gt;<br>
&lt;div id='fpWaveWrap'&gt;<br>
&lt;div class='fpWave fpWave1'&gt;&lt;/div&gt;<br>
&lt;div class='fpWave fpWave2'&gt;&lt;/div&gt;<br>
&lt;div class='fpWave fpWave3'&gt;&lt;/div&gt;<br>
&lt;div class='fpLogo'&gt;&lt;img src=&quot;images/qtx2.png&quot;/&gt;&lt;/div&gt;<br>
&lt;/div&gt;<br>
&lt;div id=&quot;fpLoadingTxt&quot;&gt;<br>
资源加载&lt;span id=&quot;fpLoadingNum&quot;&gt;0&lt;/span&gt;%<br>
&lt;/div&gt;<br>
&lt;/div&gt;</div>

	<h2>关于背景音乐</h2>
	<p>集成了背景音乐播放功能，可以点击停止，再点击开启。</p>
	<div class="demo">
		<img src="imgs/img2.png" width="200"/>
	</div>
	<div class="code">&lt;!--背景音乐--&gt;<br>
&lt;div id=&quot;fpMusic&quot;&gt;<br>
&lt;audio src=&quot;mp3/WithanOrchid.mp3&quot; preload=&quot;preload&quot; loop id=&quot;fpMusicAudio&quot;&gt;&lt;/audio&gt;<br>
&lt;div id=&quot;fpMusicPlay&quot;&gt;<br>
&lt;div id=&quot;fpMusicPlayBtn&quot;&gt;&lt;/div&gt;<br>
&lt;/div&gt;<br>
&lt;/div&gt;<br>
&lt;!--//背景音乐结束--&gt;</div>
  
</div>

<div class="footer">
	qietu(.com)切图秀 隶属武汉切图网络技术有限公司 版权所有
</div>

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</body>
</html>

